<template>
  <view class="container">
    <!-- 标题区域 -->
    <view class="header_txt">
      <view @click="goback"
            class="back">
        <image src="/static/img/back3.png"></image>
      </view>
      <view class="title"> 话题详情 </view>
    </view>
    <!-- 内容区域 -->
    <view class='topicdetail'>

      <!-- 用户信息 -->
      <view class='outview'>
        <view class='titlebox'>
          <image class='avatarimg'
                 :src="$serverIp+ info.user.avatar"></image>
          <view class='titlebox_right'>
            <view class='nickname'>{{ info.user.nickname }}</view>
            <view class='timescreen'>{{ info.createtime }}</view>
          </view>
        </view>
        <!-- 内容 区域 -->
        <view class='contentbox'>
          <view class='contetntitel'>{{ info.info }}</view>
          <block>
            <image @click="preImg(el,index)"
                   v-for="(el,index) in info.images"
                   :key="index"
                   :src='$serverIp+el'
                   class='issueimage'
                   mode="aspectFit"></image>
          </block>
        </view>
      </view>

      <!-- 点赞操作区域 -->
      <view class='zombie'>
        <view class='itembox'>
          <image class='statusimg'
                 src='/static/image/zcht_ico_dz_nor@2x.png'
                 v-show="info.is_like!=1"></image>
          <image class='statusimg'
                 src='/static/image/zcht_ico_dz_sel@2x.png'
                 v-show="info.is_like==1"></image>
          <view class="zan_num">{{ info.zan_nums  }}</view>
        </view>
        <view class='itembox'>
          <image class='statusimg'
                 src='/static/image/zcht_ico_yd_nor@2x.png'></image>
          <view class="zan_num">{{ info.read_nums }}</view>
        </view>
      </view>

      <!-- 网友评论列表 -->
      <view class='commentbox'>
        <view class="comment_title">
          <view class="comment_line"></view>网友评论({{ comment.length }})
        </view>
        <block>

          <view class="item_comment"
                v-for="(el,index) in comment"
                :key="index">
            <view class='titlebox'>
              <image class='avatarimg'
                     :src='$serverIp+el.user.avatar'></image>
              <view class='titlebox_right'>
                <view class='nickname'>{{ el.user.nickname }}</view>
                <view class='timescreen'>{{ el.createtime }}</view>
              </view>
            </view>
            <rich-text :nodes="el.comment"></rich-text>
          </view>

        </block>
      </view>

      <!-- 底部输入框 -->
      <view class='replacebtn_box'></view>
      <view class="btm_box"
            :class="layerImg">
        <view class="input_box">
          <input type="text"
                 v-model="msg"
                 placeholder="请输入评论内容"
                 placeholder-class="input_class" />
          <view class='input_box_right'>
            <image class='addicon'
                   @click="toggle"
                   src="/static/image/zcht_ico_bq@2x.png"></image>
            <view @click="comit"
                  class="input_btn">发表</view>
          </view>
        </view>
      </view>

      <!-- 抽屉栏 -->
      <view class="popup-layer popupLayerClass"
            :class="layerImg">
        <!-- 表情 -->
        <swiper class="emoji-swiper"
                indicator-dots="true"
                duration="150">
          <swiper-item v-for="(el,index) in emojiList"
                       :key="index">
            <view v-for="(item) in el"
                  :key="item.url">
              <image @click="checkemj(item)"
                     mode="widthFix"
                     :src="'../../static/img/emoji/'+item.url"></image>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>

<script>
import { emojiList, onlineEmoji } from './data'
export default {
  data() {
    return {
      emojiList,
      onlineEmoji,
      queryParms: { id: '', page: 1, limit: 10 },
      info: '',
      comment: [],
      layerImg: '',
      msg: ''
    }
  },
  onLoad(op) {
    this.queryParms.id = op.id
    this.getList()
  },
  methods: {
    async getList() {
      let { data } = await this.$http.post('/talk/read', this.queryParms)
      let { info, comment } = data.data
      comment.forEach((el) => {
        el.comment = this.toggemoji(el.comment)
      })
      this.comment = comment
      this.info = info
    },
    toggemoji(txt) {
      txt = txt.replace(/\[([^(\]|\[)]*)\]/g, (v1, v2) => {
        const obj = this.emojiList.flat(Infinity).find((i) => i.alt == v1) || {}
        const url = obj.url
        return `<img src="https://s2.ax1x.com/2019/04/12/${this.onlineEmoji[url]}"></img>`
      })
      return txt
    },
    toggle() {
      this.layerImg = this.layerImg ? '' : 'showLayer'
    },
    async comit() {
      let { data } = await this.$http.post('/talk/comment', { user_talk_id: this.queryParms.id, comment: this.msg })
      if (data.code == 1) {
        uni.showToast({ title: data.msg, icon: 'none' })
        this.getList()
      } else {
        uni.showToast({ title: data.msg, icon: 'none' })
      }
      this.layerImg = ''
    },
    async checkemj(item) {
      this.msg = this.msg += item.alt
    },
    preImg(el, index) {
      let imglist = this.info.images
      // imglist.forEach((e) => {
      //   e = this.$serverIp + e
      // })
      uni.previewImage({
        current: index,
        urls: this.info.images.map((el) => (el = this.$serverIp + el))
      })
    }
  }
}
</script>


<style lang="scss">
@import '@/static/HM-chat/css/style.scss';
/* 头部区域 */
.header_txt {
  width: 750rpx;
  overflow: hidden;
  height: 88rpx;
  background-color: #fff;

  .back {
    position: absolute;
    top: 14rpx;
    left: 14rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .right {
    position: absolute;
    top: 14rpx;
    right: 14rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .title {
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
}

.iconimg {
  //这里单独给聊天表情包样式
  height: 40rpx;
  width: 40rpx;
}

.topicdetail {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  padding-top: 20rpx;
}
.outview {
  height: auto;
  width: 100%;
  padding: 30rpx 30rpx 0;
  background-color: #ffffff;
}
.titlebox {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: auto;
}
.avatarimg {
  height: 70rpx;
  width: 70rpx;
  border-radius: 50%;
}
.titlebox_right {
  margin-left: 20rpx;
  height: 70rpx;
  width: auto;
  /* border:1rpx solid red; */
  display: flex;
  /* align-items: ; */
  flex-direction: column;
  justify-content: space-around;
}
.nickname {
  height: 30rpx;
  font-size: 30rpx;
  line-height: 30rpx;
  width: 300rpx;
}
.timescreen {
  height: 30rpx;
  line-height: 30rpx;
  width: 300rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.contentcontent {
  margin: 10rpx 0rpx 20rpx;
}
.contentbox {
  // border:1rpx solid red;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 15rpx;
}
.contetntitel {
  width: 100%;
  height: auto;
  padding-top: 20rpx;
  padding-bottom: 10rpx;
}

.zombie {
  height: 130rpx;
  width: 100%;
  display: flex;
  padding: 0 50rpx;
  justify-content: flex-end;
  align-items: center;
  background-color: #ffffff;
  /* border:1rpx solid red; */
  padding-bottom: 15rpx;
}
.itembox {
  height: 100rpx;
  width: auto;
  /* border:1rpx solid red; */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin-left: 60rpx;
}
.statusimg {
  width: 42rpx;
  height: 40rpx;
}

.commentbox {
  width: 100%;
  background-color: #ffffff;
  margin-top: 20rpx;
  height: auto;
  padding: 0rpx 30rpx;
  padding-top: 30rpx;
  padding-bottom: 10rpx;
}
.comment_title {
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 29rpx;
}
.comment_line {
  width: 4rpx;
  height: 20rpx;
  background: #ffdd47;
  border-radius: 2rpx;
  margin-right: 10rpx;
}
.item_comment {
  // border:1rpx solid red;
  padding: 10rpx 0;
}

.input_box {
  width: 100%;
  height: 58rpx;
  background: #f5f5f5;
  border-radius: 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
input {
  width: 464rpx;
  height: 100%;
  padding: 0 21rpx;
  font-size: 26rpx;
}
.input_class {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.input_box_right {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
}
.addicon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 20rpx;
}
.input_btn {
  width: 140rpx;
  height: 58rpx;
  background: linear-gradient(126deg, #ffdd47, #fcb630);
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}

.replacebtn_box {
  //代替input位置
  min-height: 100upx;
  width: 100%;
}
.zan_num {
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
</style>
